<template>
	<view class="background">
		<view class="head-box">
			<view class="head-hidden-box common">
				<view class="head-left-box" @tap="back">
					<!-- <image src="../../../static/jingjie/return_h.png"></image> -->
					<view class="return-title">取消</view>
				</view>
				<view class="head-center-box">我来回应</view>
				<view class="head-right-box" @tap="submitData"></view>
			</view>
		</view>
		<view class="border-box">
			<view class="title-head">
				<view class="title">
					<text>标题：</text>
					<input v-model="title" type="text" placeholder="标题不超过25个字" maxlength="25">
				</view>
			</view>
			<view v-for="(item,index) in imgTxtItmes" :key="index">
				<view class="item">
					<textarea v-model="item.text" class="content" auto-height="true" placeholder="输入内容" maxlength="-1"></textarea>
				</view>
				<view class="item" v-for="(item1,index1) in item.textList" :key="index">
					<textarea v-model="item1.text" class="content" auto-height="true" placeholder="输入内容" maxlength="-1"></textarea>
				</view>
				<view class="addTextArea" @tap="addTextArea(index)">
					<image src="../../../static/jingjie/add.png"></image>
					<text>添加文本段落</text>
				</view>
				<view class="img-big-box">
					<view @tap="getToken(index,'conentImg')" class="addPic">
						<view v-if="item.img==''" class="main">
							<image class="addImg" src="../../../static/jingjie/add-img.png"></image>
							<view class="addTxt">添加图片</view>
						</view>
						<image v-else mode="center" class="showImg" :src="item.img"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="coverFormat">
			<view class="coverFormat-box">
				<view class="title-coverFormat">选择封面格式</view>
				<view class="floatBox">
					<view class="flex-box" v-for="(item,index) in formatList" :key='index' @tap="slectFormat(index)">
						<image v-if="item.isShow" class="check-img" src="../../../static/jingjie/selection.png"></image>
						<image v-else class="check-img" src="../../../static/jingjie/unchecked.png"></image>
						<image class="format-img" :src="item.img2"></image>
					</view>
				</view>
			</view>
		</view>
		<input class="preview-title textOverflow" v-model="title" />
		<view class="fengmian-box">
			<view class="fm-hidden-box" v-if="formatIndex==1">
				<view class="kind1 common" @tap="getToken('coverMap1')">
					<image :src="coverMap1" mode="aspectFill"></image>
					<view class="tips-title lingHeight" :class="{style:coverMap1}">点击编辑封面</view>
				</view>
			</view>
			<view class="fm-hidden-box" v-if="formatIndex==2">
				<view class="common">
					<view class="fm-left-box update-height border-radius1" @tap="getToken('coverMap1')">
						<image class="border-radius1" :src="coverMap1" mode="aspectFill"></image>
						<view class="tips-title lingHeight" :class="{style:coverMap1}">点击编辑封面</view>
					</view>
					<view class="fm-right-box update-height border-radius2" @tap="getToken('coverMap2')">
						<image class="border-radius2" :src="coverMap2" mode="center"></image>
						<view class="tips-title lingHeight" :class="{style:coverMap2}">点击编辑封面</view>
					</view>
				</view>
			</view>
			<view class="fm-hidden-box" v-if="formatIndex==3">
				<view class="common">
					<view class="fm-left-box update-width1 border-radius3" @tap="getToken('coverMap1')">
						<image class="border-radius3" :src="coverMap1" mode="aspectFill"></image>
						<view class="tips-title" :class="{style:coverMap1}">点击编辑封面</view>
					</view>
				</view>
				<view class="common marginTop">
					<view class="san-box-one update-width border-radius4" @tap="getToken('coverMap2')">
						<image class="border-radius4" :src="coverMap2" mode="center"></image>
						<view class="tips-title active" :class="{style:coverMap1}">点击编辑封面</view>
					</view>
					<view class="san-box-one update-width border-radius5" @tap="getToken('coverMap3')">
						<image class="border-radius5" :src="coverMap3" mode="center"></image>
						<view class="tips-title active" :class="{style:coverMap3}">点击编辑封面</view>
					</view>
				</view>
			</view>
			<view class="fm-hidden-box" v-if="formatIndex==4">
				<view class="common">
					<view class="fm-left-box border-radius6" @tap="getToken('coverMap1')">
						<image class="border-radius6" :src="coverMap1" mode="aspectFill"></image>
						<view class="tips-title" :class="{style:coverMap1}">点击编辑封面</view>
					</view>
					<view class="fm-right-box border-radius7" @tap="getToken('coverMap2')">
						<image class="border-radius7" :src="coverMap2" mode="center"></image>
						<view class="tips-title" :class="{style:coverMap2}">点击编辑封面</view>
					</view>
				</view>
				<view class="common marginTop">
					<view class="san-box-one update-width border-radius4" @tap="getToken('coverMap3')">
						<image class="border-radius4" :src="coverMap3" mode="center"></image>
						<view class="tips-title active" :class="{style:coverMap3}">点击编辑封面</view>
					</view>
					<view class="san-box-one update-width border-radius5" @tap="getToken('coverMap4')">
						<image class="border-radius5" :src="coverMap4" mode="center"></image>
						<view class="tips-title active" :class="{style:coverMap4}">点击编辑封面</view>
					</view>
				</view>
			</view>
			<view class="fm-hidden-box" v-if="formatIndex==5">
				<view class="common">
					<view class="san-box-one update-width average border-radius6" @tap="getToken('coverMap1')">
						<image class="border-radius6" :src="coverMap1" mode="center"></image>
						<view class="tips-title average1" :class="{style:coverMap1}">点击编辑封面</view>
					</view>
					<view class="san-box-one update-width average border-radius7" @tap="getToken('coverMap2')">
						<image class="border-radius7" :src="coverMap2" mode="center"></image>
						<view class="tips-title average1" :class="{style:coverMap2}">点击编辑封面</view>
					</view>
				</view>
				<view class="common marginTop">
					<view class="san-box-one update-width average border-radius4" @tap="getToken('coverMap3')">
						<image class="border-radius4" :src="coverMap3" mode="center"></image>
						<view class="tips-title average1" :class="{style:coverMap3}">点击编辑封面</view>
					</view>
					<view class="san-box-one update-width average border-radius5" @tap="getToken('coverMap4')">
						<image class="border-radius5" :src="coverMap4" mode="center"></image>
						<view class="tips-title average1" :class="{style:coverMap4}">点击编辑封面</view>
					</view>
				</view>
			</view>
			<view class="fm-hidden-box" v-if="formatIndex==6">
				<view class="common">
					<view class="fm-left-box update-width update-height1 border-radius1" @tap="getToken('coverMap1')">
						<image class="border-radius1" :src="coverMap1" mode="aspectFill"></image>
						<view class="tips-title lingHeight1" :class="{style:coverMap1}">点击编辑封面</view>
					</view>
					<view class="right-box-san">
						<view class="san-box-one update-width1 average border-radius7" @tap="getToken('coverMap2')">
							<image class="border-radius7" :src="coverMap2" mode="center"></image>
							<view class="tips-title lingHeight2" :class="{style:coverMap2}">点击编辑封面</view>
						</view>
						<view class="san-box-one update-width1 average border-radius5 marginTop" @tap="getToken('coverMap3')">
							<image class="border-radius5" :src="coverMap3" mode="center"></image>
							<view class="tips-title lingHeight2" :class="{style:coverMap3}">点击编辑封面</view>
						</view>
					</view>
				</view>
			</view>
			<view class="fm-hidden-box" v-if="formatIndex==7">
				<view class="common">
					<view class="fm-left-box border-radius6" @tap="getToken('coverMap1')">
						<image class="border-radius6" :src="coverMap1" mode="aspectFill"></image>
						<view class="tips-title" :class="{style:coverMap1}">点击编辑封面</view>
					</view>
					<view class="fm-right-box border-radius7" @tap="getToken('coverMap2')">
						<image class="border-radius7" :src="coverMap2" mode="center"></image>
						<view class="tips-title" :class="{style:coverMap2}">点击编辑封面</view>
					</view>
				</view>
				<view class="common marginTop">
					<view class="san-box-one border-radius4" @tap="getToken('coverMap3')">
						<image class="border-radius4" :src="coverMap3" mode="center"></image>
						<view class="tips-title active" :class="{style:coverMap3}">点击编辑封面</view>
					</view>
					<view class="san-box-one" @tap="getToken('coverMap4')">
						<image :src="coverMap4" mode="center"></image>
						<view class="tips-title active" :class="{style:coverMap4}">点击编辑封面</view>
					</view>
					<view class="san-box-one border-radius5" @tap="getToken('coverMap5')">
						<image class="border-radius5" :src="coverMap5" mode="center"></image>
						<view class="tips-title active" :class="{style:coverMap5}">点击编辑封面</view>
					</view>
				</view>
			</view>

			<view class="fm-hidden-box" v-if="formatIndex==8">
				<view class="common">
					<view class="fm-left-box update-width border-radius6" @tap="getToken('coverMap1')">
						<image class="border-radius6" :src="coverMap1" mode="center"></image>
						<view class="tips-title" :class="{style:coverMap1}">点击编辑封面</view>
					</view>
					<view class="fm-right-box update-width border-radius7" @tap="getToken('coverMap2')">
						<image class="border-radius7" :src="coverMap2" mode="center"></image>
						<view class="tips-title" :class="{style:coverMap2}">点击编辑封面</view>
					</view>
				</view>
				<view class="common marginTop">
					<view class="san-box-one border-radius4" @tap="getToken('coverMap3')">
						<image class="border-radius4" :src="coverMap3" mode="center"></image>
						<view class="tips-title active" :class="{style:coverMap3}">点击编辑封面</view>
					</view>
					<view class="san-box-one" @tap="getToken('coverMap4')">
						<image :src="coverMap4" mode="center"></image>
						<view class="tips-title active" :class="{style:coverMap4}">点击编辑封面</view>
					</view>
					<view class="san-box-one border-radius5" @tap="getToken('coverMap5')">
						<image class="border-radius5" :src="coverMap5" mode="center"></image>
						<view class="tips-title active" :class="{style:coverMap5}">点击编辑封面</view>
					</view>
				</view>
			</view>

			<view class="fm-hidden-box" v-if="formatIndex==9">
				<view class="common">
					<view class="fm-left-box update-width1 border-radius3" @tap="getToken('coverMap1')">
						<image class="border-radius3" :src="coverMap1" mode="aspectFill"></image>
						<view class="tips-title" :class="{style:coverMap1}">点击编辑封面</view>
					</view>
				</view>
				<view class="common marginTop">
					<view class="san-box-one border-radius4" @tap="getToken('coverMap2')">
						<image class="border-radius4" :src="coverMap2" mode="center"></image>
						<view class="tips-title active" :class="{style:coverMap2}">点击编辑封面</view>
					</view>
					<view class="san-box-one" @tap="getToken('coverMap3')">
						<image class="border-radius4" :src="coverMap3" mode="center"></image>
						<view class="tips-title active" :class="{style:coverMap3}">点击编辑封面</view>
					</view>
					<view class="san-box-one border-radius5" @tap="getToken('coverMap4')">
						<image class="border-radius5" :src="coverMap4" mode="center"></image>
						<view class="tips-title active" :class="{style:coverMap4}">点击编辑封面</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn" @tap="submitData">
			发布
		</view>
	</view>
</template>

<script>
	import qiniu from "../../../common/qiniuUploader.js"

	export default {
		components: {

		},
		data() {
			return {
				// menuIndex: 0,
				imageList: [],
				formatIndex: 1, //选中版式
				isShowPublish: false,
				// labelName: '',
				formatList: [{
						img2: "../../../static/jingjie/one.png",
						isShow: true
					},
					{
						img2: "../../../static/jingjie/two.png",
						isShow: false
					},
					{
						img2: "../../../static/jingjie/three.png",
						isShow: false
					},
					{
						img2: "../../../static/jingjie/four.png",
						isShow: false
					},
					{
						img2: "../../../static/jingjie/five.png",
						isShow: false
					},
					{
						img2: "../../../static/jingjie/six.png",
						isShow: false
					},
					{
						img2: "../../../static/jingjie/seven.png",
						isShow: false
					},
					{
						img2: "../../../static/jingjie/eight.png",
						isShow: false
					},
					{
						img2: "../../../static/jingjie/nine.png",
						isShow: false
					},
				],
				coverMap1: '',
				coverMap2: '',
				coverMap3: '',
				coverMap4: '',
				coverMap5: '',
				classList: [],
				disPlay: true,
				imgNum: [],
				classIndex: 1,
				isDisplay: true,
				sourceType: [
					['camera'],
					['album'],
					['camera', 'album']
				],
				sizeType: [
					['compressed'],
					['original'],
					['compressed', 'original']
				],

				funTitle: '',
				content: '',
				backImgArr: [],
				index: 0, //上传图片索引
				addressInfo: null,
				title: '',
				imgTxtItmes: [{
					text: '',
					img: '',
					textList: []
				}], //每组
				id: '',
				classfiy: '',
				token: '', //图片上传token
			}
		},
		onLoad: function(option) {
			this.id = option.id;
			this.classfiy = option.classfiy;
		},
		onShow: function() {

		},
		mounted() {

		},
		methods: {
			// 			selectMenu(index) {
			// 				this.menuIndex = index;
			// 				// this.$emit('switchTab', index)
			// 			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},

			addTextArea(index) { //点击添加文本段落
				for (var i = 0; i < this.imgTxtItmes.length; i++) {
					let obj = {
						text: '',
					}
					this.imgTxtItmes[index].textList.push(obj)
					break
				}
			},
			// #ifdef APP-PLUS
			getToken(index, type) {
				this.appselectImg(index, type)
			},
			// #endif
			// #ifdef MP-WEIXIN
			getToken(index, type) {
				var me = this;
				var data = {
					key: null,
				}
				this.myAjaxNewPost({
					model: 'push',
					controllerName: 'upload',
					actionName: 'getToken',
					data: data,
					successBack: function(res) {
						me.token = res.data.data
						console.log(me.token)
						if (me.token != '') {
							me.selectImg(index, type)
						}
					}
				})
			},
			// #endif
			appselectImg(index,type){
				var me = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: function(res) {
						// me.card_front = res.tempFilePaths[0];
						var filePath = res.tempFilePaths[0];
						
						uni.uploadFile({
							url: 'http://www.curiousmore.com:8768/eg-api/push/upload/uploadPicture',
							// url: 'http://192.168.101.14:8768/eg-api/push/upload/uploadPicture',
							filePath: filePath,
							name: 'file',
							formData: {
								'user_id': uni.getStorageSync('user_id'),
								'type': 'pic'
							},
							success: function(uploadFileRes) {
								// me.backImgArr.push(JSON.parse(uploadFileRes.data)[0]);
								console.log(JSON.parse(uploadFileRes.data)[0]);
								var imageURL = JSON.parse(uploadFileRes.data)[0];
								if (type == 'conentImg') {
									if (me.imgTxtItmes[index].img == '') {
										let obj = {
											text: '',
											img: '',
											textList: []
										}
										me.imgTxtItmes.push(obj);
									}
									me.imgTxtItmes[index].img = imageURL;
									if (index == 0) { //默认封面图
										me.coverMap1 = imageURL;
									} else if (index == 1) {
										me.coverMap2 = imageURL;
									} else if (index == 2) {
										me.coverMap3 = imageURL;
									} else if (index == 3) {
										me.coverMap4 = imageURL;
									} else if (index == 4) {
										me.coverMap5 = imageURL;
									}
								} else {
									if (index == 'coverMap1') {
										me.coverMap1 = imageURL
									} else if (index == 'coverMap2') {
										me.coverMap2 = imageURL
									} else if (index == 'coverMap3') {
										me.coverMap3 = imageURL
									} else if (index == 'coverMap4') {
										me.coverMap4 = imageURL
									} else if (index == 'coverMap5') {
										me.coverMap5 = imageURL
									}
								}
						
							},
							fail: function(e) {
								uni.showToast({
									title: '图片上传失败，请重试',
									icon: 'none'
								})
								return;
							}
						});
					}
				});
			},
			selectImg(index, type) {
				// this.initQiniu();
				var me = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: function(res) {
						// me.card_front = res.tempFilePaths[0];
						var filePath = res.tempFilePaths[0];
						// 交给七牛上传
						
						if (me.token != '') {
							uni.showLoading({
								title:'上传中'
							})
							qiniu.upload(filePath, (res) => {
								console.log(res.imageURL)
								var imageURL = res.imageURL
								if (type == 'conentImg') {
									if (me.imgTxtItmes[index].img == '') {
										let obj = {
											text: '',
											img: '',
											textList: []
										}
										me.imgTxtItmes.push(obj);
									}
									me.imgTxtItmes[index].img = imageURL;
									if (index == 0) { //默认封面图
										me.coverMap1 = imageURL;
									} else if (index == 1) {
										me.coverMap2 = imageURL;
									} else if (index == 2) {
										me.coverMap3 = imageURL;
									} else if (index == 3) {
										me.coverMap4 = imageURL;
									} else if (index == 4) {
										me.coverMap5 = imageURL;
									}
								} else {
									if (index == 'coverMap1') {
										me.coverMap1 = imageURL
									} else if (index == 'coverMap2') {
										me.coverMap2 = imageURL
									} else if (index == 'coverMap3') {
										me.coverMap3 = imageURL
									} else if (index == 'coverMap4') {
										me.coverMap4 = imageURL
									} else if (index == 'coverMap5') {
										me.coverMap5 = imageURL
									}
								}
								uni.hideLoading()
								console.log('file url is: ' + res.fileUrl);
							}, (error) => {
								uni.showToast({
									title: '上传失败',
									icon: null
								});
								console.log('error: ' + error);
							}, {
								region: 'ECN',
								domain: 'http://img.curiousmore.com', // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接
								key: null, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
								// 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
								uptoken: me.token, // 由其他程序生成七牛 uptoken
								// uptokenURL: 'http://192.168.6.6:8768/eg-api/push/upload/getToken', // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "[yourTokenString]"}
								uptokenFunc: function() {
									return '[yourTokenString]';
								}
							}, (res) => {
								console.log('上传进度', res.progress)
								console.log('已经上传的数据长度', res.totalBytesSent)
								console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
							}, () => {
								// 取消上传
							}, () => {
								// `before` 上传前执行的操作
							}, (err) => {
								// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
							});
						}
					}
				});
			},

			submitData() { //发布
				if (this.title == '') {
					uni.showToast({
						title: '请输入标题',
						icon: 'none'
					})
					return;
				}
				console.log(this.imgTxtItmes);

				//封面图
				var coverPics;
				if (this.formatIndex == 3 || this.formatIndex == 6) {
					if (this.coverMap3 == '' || this.coverMap2 == "" || this.coverMap1 == '') {
						uni.showToast({
							title: '至少得上传3张封面图片',
							icon: 'none'
						})
						return;
					}
					coverPics = [this.coverMap1, this.coverMap2, this.coverMap3];
				} else if (this.formatIndex == 5 || this.formatIndex == 4 || this.formatIndex == 9) {
					if (this.coverMap4 == '' || this.coverMap3 == '' || this.coverMap2 == '' || this.coverMap1 == '') {
						uni.showToast({
							title: '至少得上传4张封面图片',
							icon: 'none'
						})
						return;
					}
					coverPics = [this.coverMap1, this.coverMap2, this.coverMap3, this.coverMap4];
				} else if (this.formatIndex == 8 || this.formatIndex == 7) {
					if (this.coverMap5 == '' || this.coverMap4 == '' || this.coverMap3 == '' || this.coverMap2 == '' || this.coverMap1 ==
						'') {
						uni.showToast({
							title: '至少得上传5张图片',
							icon: 'none'
						})
						return;
					}
					coverPics = [this.coverMap1, this.coverMap2, this.coverMap3, this.coverMap4, this.coverMap5];
				} else if (this.formatIndex == 2) {
					if (this.coverMap2 == '' || this.coverMap1 == '') {
						uni.showToast({
							title: '至少得上传2张封面图片',
							icon: 'none'
						})
						return;
					}
					coverPics = [this.coverMap1, this.coverMap2];
				} else {
					if (this.coverMap1 == '') {
						uni.showToast({
							title: '至少得上传1张封面图片',
							icon: 'none'
						})
					}
					coverPics = [this.coverMap1];
				}

				//图文
				var imgTxt = [];
				for (let i = 0; i < this.imgTxtItmes.length - 1; i++) {
					if (this.imgTxtItmes[i].text != '') {
						imgTxt.push(this.imgTxtItmes[i].text);
					}
					for (let j = 0; j < this.imgTxtItmes[i].textList.length; j++) {
						console.log(this.imgTxtItmes[i].textList[j].text)
						imgTxt.push(this.imgTxtItmes[i].textList[j].text)
					}
					if (this.imgTxtItmes[i].img != '') {
						imgTxt.push(this.imgTxtItmes[i].img);
					}
				}
				var style='';
				if(this.formatIndex==7){
					style=1
				}else if(this.formatIndex==4){
					style=2
				}else if(this.formatIndex==6){
					style=3
				}else if(this.formatIndex==3){
					style=4
				}else if(this.formatIndex==9){
					style=5
				}else if(this.formatIndex==2){
					style=6
				}else if(this.formatIndex==5){
					style=7
				}else if(this.formatIndex==8){
					style=8
				}else if(this.formatIndex==1){
					style=9
				}
				var data = {
					user_id: uni.getStorageSync('user_id'),
					curiosity_id: this.id, //this.auth_id
					title: this.title,
					style: style,
					coverPics: coverPics,
					picStrings: imgTxt,
					classfiy: this.classfiy,
					// contents: [], 
					// longitude: this.addressInfo.longitude,
					//covercontent: this.title, //封面文字
				}

				console.log(data);
				this.myAjaxNewPost({
					model: 'news',
					controllerName: "curiosityViewpoint",
					actionName: 'insert',
					data: data,
					successBack: function(res) {
						console.log(res);
						uni.showToast({
							title: '发布成功',
							icon: 'none'
						})
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
			CurentTime() { //当前时间
				var now = new Date();
				var year = now.getFullYear();
				var month = now.getMonth() + 1;
				var day = now.getDate();
				var clock = year + "-";
				if (month < 10)
					clock += "0";
				clock += month + "-";
				if (day < 10)
					clock += "0";
				clock += day + "";
				return (clock);
			},
			slectFormat(index) {
				this.formatIndex = index + 1;
				for (var i = 0; i < this.formatList.length; i++) {
					this.formatList[i].isShow = false;
					this.formatList[index].isShow = true;
				}
			}
		},
	}
</script>

<style scoped>
	/*头部开始*/
	.head-box {
		width: 100%;
		height: 128upx;
		background-color: white;
		padding: 0 24upx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		z-index: 999;
	}

	.head-hidden-box {
		padding-top: 65upx;
		width: 100%;
	}

	.head-left-box {
		display: flex;
		align-items: center;
	}

	.head-left-box image {
		width: 21upx;
		height: 36upx;
	}

	.return-title {
		color: rgba(102, 102, 102, 1);
		font-size: 32upx;
		margin-left: 10upx;
	}

	.head-center-box {
		color: rgba(51, 51, 51, 1);
		font-size: 36upx;
	}

	.head-right-box {
		width: 80upx;
		color: rgba(70, 206, 207, 1);
		font-size: 32upx;
	}

	/*头部结束*/
	.background {
		width: 100%;
		background-color: #FFFFFF;
	}

	.item {
		padding: 34upx 24upx;
		border-bottom: 1upx solid rgba(230, 230, 230, 1);

	}

	.item textarea {
		padding: 20upx 0upx 30upx 20upx;
		width: 688upx;
	}

	.title-head {
		border-top: 1upx solid rgba(230, 230, 230, 1);
		border-bottom: 1upx solid rgba(230, 230, 230, 1);
		margin-top: 128upx;
		padding: 20upx;
		color: #333333;
		font-size: 38upx;
		display: flex;
		align-items: center;
	}

	.title-head input {
		font-size: 28upx;
		padding-top: 10upx;
	}

	.addTextArea {
		padding: 34upx 24upx;
		/* border-bottom: 1upx solid rgba(230,230,230,1); */
		display: flex;
		align-items: center;
	}

	.addTextArea image {
		width: 35upx;
		height: 35upx;
	}

	.addTextArea text {
		font-size: 36upx;
		color: #33cbcb;
		margin-left: 10upx;
	}

	.item-title {
		font-size: 36upx;
	}

	.item-main {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.item-styles {
		margin-right: 50upx;
		display: flex;
		align-items: center;
	}

	.item-styles .select {
		width: 26upx;
		height: 26upx;
		margin-right: 10upx;
	}

	.item-styles .style {
		width: 70upx;
		height: 41upx;
	}

	.title {
		display: flex;
		align-items: center;
		margin-top: 10upx;
	}

	.title text {
		font-size: 38upx;
		color: rgba(51, 51, 51, 1);
		font-weight: bold;
	}

	.title input {
		width: 520upx;
		display: inline-block;
	}

	.content {
		width: 100%;
		height: 160upx;
		background: rgba(233, 247, 247, 1);
		font-size: 36upx;
		margin: auto;
	}

	.img-big-box {
		width: 100%;
		padding: 0 24upx;
		box-sizing: border-box;
	}

	.addPic {
		width: 100%;
		height: 342upx;
		background: #E9F7F7;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.addPic .main {
		text-align: center;
	}

	.addImg {
		width: 81upx;
		height: 79upx;
	}

	.addTxt {
		font-size: 36upx;
		color: #33CBCC;
	}

	.style1-main {
		display: flex;
		align-items: center;
		margin-top: 10upx;
	}

	.style1-main textarea {
		height: 222upx;
		line-height: 74upx;
	}

	.style1-img {
		width: 222upx;
		height: 222upx;
		background: #E9F7F7;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.style1-img .main {
		text-align: center;
	}

	.style2 {
		margin-top: 10upx;
	}

	.border-box {
		border-bottom: 1upx solid rgba(230, 230, 230, 1);
		padding-bottom: 50upx;
	}

	.style2-img {
		background: #E9F7F7;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 342upx;
		margin-top: 10upx;
	}

	.style2-img .main {
		text-align: center;
	}

	.style3-main {
		display: flex;
		justify-content: space-between;
		margin-top: 10upx;
	}

	.style3-img {
		background: #E9F7F7;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 210upx;
		height: 210upx;
	}

	.style3-img .main {
		text-align: center;
	}

	.addPic .main {
		text-align: center;
	}

	.showImg {
		width: 100%;
		height: 100%;
	}

	.beijing {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		position: relative;
	}

	.coverFormat {
		width: 100%;
		padding: 0 24upx;
		box-sizing: border-box;
	}

	.coverFormat-box {
		width: 100%;
	}

	.title-coverFormat {
		color: rgba(153, 153, 153, 1);
		font-size: 32upx;
		margin-top: 44upx;
	}

	.floatBox {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.flex-box {
		display: flex;
		align-items: center;
		width: 105upx;
		margin-top: 30upx;
		margin-right: 45upx;
	}

	.flex-box:nth-child(5) {
		margin-right: 0;
	}

	.check-img {
		width: 26upx;
		height: 26upx;
		margin-right: 15upx;
	}

	.format-img {
		width: 70upx;
		height: 40upx;
	}

	.preview-title {
		color: rgba(51, 51, 51, 1);
		font-size: 34upx;
		margin-top: 40upx;
		padding: 0 24upx;
		box-sizing: border-box;
	}

	.fengmian-box {
		width: 100%;
		padding: 0 24upx;
		box-sizing: border-box;
		padding-bottom: 50upx;
	}

	.fm-hidden-box {
		width: 100%;
		background-color: white;
	}

	.kind1 {
		width: 100%;
		height: 350upx;
		background: rgba(233, 247, 247, 1);
		border-radius: 10upx;
		position: relative;
		z-index: 1;
	}

	.kind1 image {
		width: 100%;
		height: 100%;
		border-radius: 10upx;
	}

	.fm-left-box {
		width: 519upx;
		height: 286upx;
		position: relative;
		z-index: 1;
		background: rgba(233, 247, 247, 1);
	}

	.fm-left-box image {
		width: 100%;
		height: 100%;
	}

	.fm-right-box {
		width: 182upx;
		height: 286upx;
		background: rgba(233, 247, 247, 1);
		position: relative;
		z-index: 1;
	}

	.fm-right-box image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.tips-title {
		width: 100%;
		text-align: center;
		line-height: 286upx;
		color: rgba(204, 204, 204, 1);
		font-size: 26upx;
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
	}

	.style {
		color: rgba(255, 255, 255, 1);
	}

	.average1 {
		line-height: 227.5upx;
	}

	.lingHeight {
		line-height: 350upx;
	}

	.tips-title.style {
		color: rgba(255, 255, 255, 1);
	}

	.tips-title.active {
		line-height: 169upx;
	}

	.marginTop {
		margin-top: 5upx;
	}

	.san-box-one {
		width: 232upx;
		height: 169upx;
		background: rgba(233, 247, 247, 1);
		position: relative;
		z-index: 1;
	}

	.san-box-one image {
		width: 100%;
		height: 100%;
	}

	.update-height {
		height: 350upx;
	}

	.update-width {
		width: 49.7%;
	}

	.update-width1 {
		width: 100%;
	}

	.average {
		height: 227.5upx;
	}

	.border-radius1 {
		border-radius: 10upx 0 0 10upx;
	}

	.border-radius2 {
		border-radius: 0 10upx 10upx 0;
	}

	.border-radius3 {
		border-radius: 10upx 10upx 0 0;
	}

	.border-radius4 {
		border-radius: 0upx 0upx 0upx 10upx;
	}

	.border-radius5 {
		border-radius: 0upx 0upx 10upx 0upx;
	}

	.border-radius6 {
		border-radius: 10upx 0upx 0upx 0upx;
	}

	.border-radius7 {
		border-radius: 0upx 10upx 0upx 0upx;
	}

	.update-height1 {
		height: 460upx;
	}

	.lingHeight1 {
		line-height: 460upx;
	}

	.right-box-san {
		width: 49.7%;
	}

	.update-width1 {
		width: 100%;
	}

	.lingHeight2 {
		line-height: 227.5upx;
	}
	.btn{
		margin-bottom: 60upx;
	}
</style>
